<template>
	<view class="collectList">
		<!-- 足迹列表 -->
		<u-navbar title="我的足迹" :autoBack="true"></u-navbar>
		<view class="collectListImg">
			<img src="/static/my/bag.jpg" alt="" />
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="collectListDiv">
				<view class="collectListDivItem" :style="item.type !='攻略'?'height: 500rpx':''"
					v-for="(item,index) in collectListData" :key="index" @click="goDetails(item)">
					<view class="collectListDivItemImg">
						<img :src="item.photo[0]" alt="" />
					</view>
					<view class="impressionListJ" v-if="item.type !='攻略'">
						<p>{{item.title}}</p>
						<view class="impressionListJI" v-if="item.distanceKm">
							<img src="/static/home/juli.png" alt="" />
							<span>{{item.distanceKm}}km</span>
						</view>
					</view>
					<view class="impressionListI" v-else>
						<p>{{item.title}}</p>
						<view class="impressionListII">
							<img v-if="item.profilePhoto" :src="item.profilePhoto" alt="" />
							<span v-if="item.nickName">{{item.nickName}}</span>
						</view>
					</view>
					<view class="impressionListB">
						{{item.type}}
					</view>
					<view class="collectListDivItemIcon" @click="delData(item)">
						<u-icon name="close-circle" color="red" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="load-more" v-if="showLoading">
				<text>滑动到底部加载更多</text>
			</view>
			<view class="load-more" v-if="showNoMore">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		browsingHistoryList,
		browsingHistoryDelete
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				collectListData: [],
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false, // 显示没有更多
			};
		},
		onLoad() {
			this.getCollectList()
		},
		methods: {
			// 攻略详情
			goDetails(item) {
				if (item.type == '攻略') {
					uni.navigateTo({
						url: `/pages/strategyDetails/strategyDetails?id=${item.detailsId}`
					})
				} else if (item.type == '景区') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.detailsId}&type=0`
					})
				} else if (item.type == '酒店') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.detailsId}&type=1`
					})
				} else if (item.type == '美食') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.detailsId}&type=2`
					})
				}
			},
			// 删除
			async delData(item) {
				let par = {
					id: [item.id]
				}
				let res = await browsingHistoryDelete(par)
				if (res.code == 200) {
					this.getCollectList()
				}
			},
			// 滑动到底部加载更多
			lower() {
				if (this.collectListData.length < this.total) {
					this.pageSize += 10;
					this.getCollectList();
				} else if (this.collectListData.length >= this.total) {
					this.showNoMore = true;
					this.showLoading = false;
				}
				console.log(1);
			},
			async getCollectList() {
				let lon = this.$store.state.lonLat[0]
				let lat = this.$store.state.lonLat[1]
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					lon: lon ? lon : null,
					lat: lat ? lat : null,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await browsingHistoryList(par)
				if (res.code == 200) {
					const newData = res.data.list;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.collectListData = newData;
					} else {
						this.collectListData = this.collectListData.concat(newData);
					}
					// 控制显示状态
					if (this.collectListData.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					this.isLoading = false;
					this.showLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.collectList {
		.scroll-Y {
			width: 100%;
			height: calc(100vh - 245rpx);
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 40rpx;
			margin-top: -60rpx;
			position: relative;

			.collectListDiv {
				width: 100%;
				// display: flex;
				// justify-content: space-between;
				// flex-wrap: wrap;
				column-count: 2;

				.collectListDivItem {
					width: 100%;
					margin-bottom: 15rpx;
					position: relative;
					break-inside: avoid; // 防止内容被分割到不同列

					.collectListDivItemIcon {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}

					.impressionListB {
						font-size: 22rpx;
						position: absolute;
						left: 0;
						top: 0;
						background-color: #ffffff;
						border-radius: 10rpx 0 20rpx 0;
						padding: 5rpx;
						color: #666;
					}

					.impressionListI {
						padding: 0 10rpx;

						.impressionListII {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							gap: 10rpx;
							font-size: 24rpx;
							color: #666;

							img {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}
						}

						p {
							font-size: 26rpx;
							font-weight: bold;
						}
					}

					.impressionListJ {
						width: 100%;
						position: absolute;
						left: 0;
						bottom: 0;
						padding: 10rpx;
						background: rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(10rpx);
						-webkit-backdrop-filter: blur(10rpx);
						border-radius: 0 0 20rpx 20rpx;
						color: #ffffff;

						.impressionListJI {
							display: flex;
							align-items: center;

							img {
								width: 40rpx;
								height: 40rpx;
							}

							span {
								font-size: 22rpx;
							}
						}

						p {
							font-size: 26rpx;
						}


					}

					.collectListDivItemImg {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						img {
							width: 100%;
							height: 500rpx;
							border-radius: 20rpx;
						}
					}


				}
			}

			.load-more {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
			}

			/* 加载动画 */
			.loading-spinner {
				width: 30rpx;
				height: 30rpx;
				border: 3rpx solid #ccc;
				border-top-color: #333;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 16rpx;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}
		}



		.collectListImg {
			width: 100%;
			height: 300rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background: none !important;
		}
	}
</style>